<template>
  <div class="outside-the-box">
    <div class="contain-box manage-box">
      <header>
        平台管理
      </header>
      <div class="main-box">
        <div class="operation">
          <form class="operation-search-form" @submit.prevent="searchGroup">
            <el-input placeholder="请输入平台名称" v-model="search_name">
              <el-button slot="append" icon="el-icon-search" @click="searchGroup"></el-button>
            </el-input>
          </form>
          <div class="operation-row">
            <div class="operation-block" @click="inviteGroup" v-if="total > 0">
              收到的申请 {{total}}条
            </div>
            <div class="operation-block" @click="createGroup">
              <i class="text-blue el-icon-circle-plus promary"></i>
              <span>创建群</span>
            </div>
          </div>
        </div>
        <create-group-form v-bind:is_create_group_form_show.sync="is_create_group_form_show"></create-group-form>
        <group-table class="table"></group-table>
        <apply-list :data="apply_join_group_list" :is_invite_list_show.sync="is_invite_list_show"></apply-list>
      </div>
    </div>
  </div>

</template>

<script>
import group from "@/api/group.js";

import { mapGetters } from "vuex";

import CreateGroupForm from "./create.vue";
import GroupTable from "./table.vue";
import ApplyList from "./apply_list.vue";

export default {
  name: "group-manage",
  components: {
    CreateGroupForm,
    GroupTable,
    ApplyList
  },
  computed: {
    ...mapGetters("group", ["apply_join_group_list"])
  },
  data() {
    return {
      search_name: undefined,
      is_create_group_form_show: false,
      is_invite_list_show: false,
      total: undefined
    };
  },
  methods: {
    searchGroup() {
      this.$store.dispatch("group/getGroupList", {
        groupName: this.search_name
      });
      this.search_name = undefined;
    },
    createGroup() {
      this.is_create_group_form_show = true;
    },
    inviteGroup() {
      this.is_invite_list_show = true;
    }
  },
  async mounted() {
    await this.$store.dispatch("group/getApplyJoinGroupList");
    this.total = this.apply_join_group_list.length;
  },
  watch: {
    apply_join_group_list(newVal) {
      this.total = newVal.length;
    }
  }
};
</script>

<style>
</style>
